<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSONP</title>
</head>
<style>
    #but{
        padding: 5px 10px;
        font-size: 15px;
    }
</style>
<body>
    <button id="but">JSON</button>
</body>

<script type="text/javascript">

    var btn = document.getElementById('but');
    btn.addEventListener('click',(e)=>{
        let fnName = 'callBackName';// 可以加时间戳
        window[fnName] = (data)=>{
            console.log(data);
        }
        // 第二种：动态创建标签，在创建标签的时候，定义在全局对象上定义回调函数（可以自定义函数名）
        const script = document.createElement('script');
        script.src = `http://localhost:7788/async?callback=${fnName}`;
        document.head.appendChild(script);
    });
    // 第一种： 直接定义函数，（注意，回调函数一定要定义在加载的<script>前），
    //原因：在html中的<script>的请求会阻塞后面代码的执行，请求成功后会立即执行请求的的结果
    function jsonpCallback(res){
        console.log(res);
    };
</script>
<script src="http://localhost:7788/fixation"></script>
</html>